'use client';

import { motion } from 'framer-motion';
import Image from 'next/image';

export default function FloatingIcons() {
  return (
    <div className="relative h-screen w-full flex items-center justify-center overflow-hidden">
      {/* Outer circle path (visible) */}
      <div className="absolute w-[800px] h-[800px] border border-gray-200/20 rounded-full" />
      
      {/* Inner circle path (visible) */}
      <div className="absolute w-[400px] h-[400px] border border-gray-200/20 rounded-full" />

      {/* Center card */}
      <motion.div 
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="bg-white/5 backdrop-blur-lg rounded-lg p-8 max-w-md z-10"
      >
        <h2 className="text-gray-600 mb-4">My name is:</h2>
        <h1 className="text-5xl font-bold text-[#FF9851] mb-8">BigfaceKitty</h1>
        
        <h2 className="text-gray-600 mb-4">I'm a:</h2>
        <div className="space-y-2 text-right">
          <p className="text-gray-600">Full Stack Developer</p>
          <p className="text-gray-600">Musician Layman</p>
          <p className="text-gray-600">Lover of life</p>
        </div>
      </motion.div>

      {/* Outer circle icons */}
      {outerCircleIcons.map((icon, index) => (
        <motion.div
          key={`outer-${index}`}
          className="absolute"
          animate={{
            rotate: [0, 360],
          }}
          transition={{
            duration: 20,
            repeat: Infinity,
            ease: "linear",
          }}
          style={{
            width: icon.radius,
            height: icon.radius,
            transformOrigin: "center center",
          }}
        >
          <motion.div
            style={{
              position: 'absolute',
              left: `${icon.position}%`,
              top: `${icon.top}%`,
              transform: 'translate(-50%, -50%)',
            }}
          >
            <Image
              src={icon.src}
              alt={icon.alt}
              width={icon.size}
              height={icon.size}
              className="select-none"
            />
          </motion.div>
        </motion.div>
      ))}

      {/* Inner circle icons */}
      {innerCircleIcons.map((icon, index) => (
        <motion.div
          key={`inner-${index}`}
          className="absolute"
          animate={{
            rotate: [360, 0], // Rotate in opposite direction
          }}
          transition={{
            duration: 15,
            repeat: Infinity,
            ease: "linear",
          }}
          style={{
            width: icon.radius,
            height: icon.radius,
            transformOrigin: "center center",
          }}
        >
          <motion.div
            style={{
              position: 'absolute',
              left: `${icon.position}%`,
              top: `${icon.top}%`,
              transform: 'translate(-50%, -50%)',
            }}
          >
            <Image
              src={icon.src}
              alt={icon.alt}
              width={icon.size}
              height={icon.size}
              className="select-none"
            />
          </motion.div>
        </motion.div>
      ))}
    </div>
  );
}

const outerCircleIcons = [
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 60,
    position: 0,
    top: 45,
    radius: 800,
  },
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 50,
    position: 25,
    top: 55,
    radius: 750,
  },
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 120,
    position: 50,
    top: 48,
    radius: 850,
  },
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 60,
    position: 75,
    top: 52,
    radius: 780,
  },
];

const innerCircleIcons = [
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 40,
    position: 0,
    top: 47,
    radius: 400,
  },
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 35,
    position: 33,
    top: 53,
    radius: 380,
  },
  {
    src: "/svg/butterfly_black.png",
    alt: "Butterfly",
    size: 80,
    position: 66,
    top: 49,
    radius: 420,
  },
];